
define(['config'],()=>{
  require(['jquery'],()=>{
      

    let pageNo = 1 //页号
    let allStr = '' //所有商品数据
    

    function loadProduct(pageNo) {
      $.ajax({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list',
        data: {
          pageSize: 8,
          pageNo,
        },
        success: function (data) {
          if (data.resultCode == 1) {
            let list = data.resultInfo.list
            showProductList(list)
          }
        },
      })
    
    }
    
    
    /* 将数据库获取到的数据渲染到页面中 */
    function showProductList(list) {
      let str = list.map(item => {
        return `
        <a href="html/detail.html?id=${item.id}" style="text-decoration:none; color:black;">
             <div class="product">
                <img src="${item.picture}" alt="${item.shop}">
                <!-- 商品详情 -->
                <div class="product-details">
                  <p>${item.shop}</p>
                  <p>
                    <span>淘宝</span>
                    <span>包邮</span>
                  </p>
                  <p>
                    <span>￥<span>${item.price}</span></span>
                    ${item.oldprice}人已买
                  </p>
                </div>
             </div>
             </a>
               `
      }).join('')
      
      allStr += str
      const productList = document.querySelector('.productList')
      productList.innerHTML = allStr
    
    }
    /* 点击按钮显示内容 */
    function showMore() {
      const btnEle = document.querySelector('.showMore>button')
      btnEle.addEventListener('click', function () {
        loadProduct(++pageNo)
      })
    }
   
   
    loadProduct(pageNo)
    showMore()


  })
})
